<template>
<div>
  <header>
    <span >徽章名称：</span>
    <Input v-model="queryData.honorName" placeholder="请输入徽章的名称" style="width: 280px"/>
    <span style="margin-left:5px;">员工名称：</span>
    <Input v-model="queryData.employeeName" placeholder="请输入员工的名称" style="width: 280px"/>
    <span style="margin-left:5p;">员工工号：</span>
    <Input v-model="queryData.employeeId" placeholder="请输入员工的工号" style="width: 280px"/>
    <Button type="primary" @click="queryList" class="query">查询</Button>
    <Button @click="reset" class="reset">重置</Button>
  </header>
  <div style="margin-top:10px">
    <Table stripe :columns="columns1" :data="data1">
      <template slot-scope="{ row }" slot="iconImg">
        <img :src="row.iconImg" style="height: 80px;width: 80px"/>
      </template>
<!--      <template slot="action" slot-scope="{ row, index }">-->
<!--        <Button type="primary" @click="add(index)" size="small">添加新徽章</Button>-->
<!--      </template>-->
    </Table>
  </div>
  <div style="margin: 10px;overflow: hidden">
    <div style="float: right;">
      <Page :total="100" :current="queryData.currentPage" @on-change="changePage"  @on-page-size-change="changeSize" show-elevator show-sizer></Page>
    </div>
  </div>
<!--  <Modal v-model="modal1"-->
<!--         title="添加徽章"-->
<!--         @on-ok="addHonorRelation"-->
<!--         @on-cancel="cancel">-->
<!--    <span>新徽章：</span>-->
<!--    <Select v-model="addHonorData.honorTypeId" style="width:200px">-->
<!--      <Option v-for="item in honorList" :value="item.honorId" :key="item.honorId">{{ item.honorName }}</Option>-->
<!--    </Select>-->
<!--  </Modal>-->
</div>
</template>

<script>
import {
  addHonorRelation,
  getAllHonorType,
  getAllViolationType,
  getHonorRelationshipList,
  getViolationImage,
  getViolationRecordList
} from "../../../../api/data";
import expandRow from './table-expand.vue';
export default {
  name: "honor_management",
  data() {
    return{
      modal1: false,
      selected: 0,
      honorList: [],
      addHonorData: {
        honorTypeId: '',
        account: ''
      },
      queryData:{
        honorName: '',
        employeeName: '',
        employeeId: '',
        page: '1',
        limit: '10'
      },
      honor:{
        addForm:{
          name: '',
          image: '',
        },
        formImage: ''
      },
      columns1: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '账号',
          key: 'account'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '徽章总数',
          sortable: true,
          key: 'count'
        },
        {
          title: '徽章总积分',
          sortable: true,
          key: 'score'
        },
        // {
        //   title: '操作',
        //   key: 'action',
        //   slot: 'action',
        //   align: 'center'
        // }
      ],
      data1: []
    }
  },
  methods:{
    reset(){
      this.queryData.honorName='';
      this.queryData.employeeName='';
      this.queryData.employeeId='';
    },
    add(index){
      this.selected=index;
      this.addHonorData.account=this.data1[index].account;
      this.modal1=true;
    },
    submit(){

    },
    cancel(){

    },
    addHonorRelation(){
      addHonorRelation(this.addHonorData).then(res=>{

      }).catch(err=>{
        alert(err.message())
      })
    },
    changePage(pageNumber) {
      this.queryData.page = pageNumber
      this.queryList()
    },
    changeSize(pageSize) {
      this.queryData.limit = pageSize
    },
    queryList() {
      getHonorRelationshipList(this.queryData).then(res => {
        let list=res.data.obj;
        list.forEach(item=>{
          item.arrayList.forEach(item2=>{
            item2.honorImage='data:image/jpeg;base64,'+item2.honorImage;
            let timeArr = item2.createTime;
            item2.createTime=timeArr[0]+"-"+timeArr[1]+"-"+timeArr[2]
          })
        })
        this.data1=list;
        console.log(this.data1)
      }).catch(err => {
      })
    },

    getAllTypes(){
      getAllHonorType().then(res=>{
        this.honorList=res.data.obj;
        console.log(this.honorList)
      }).catch(err => {
        alert(err.message())
      })
    },

    detail(index) {
      this.selected = index
      getViolationImage(this.data1[index].udvrecordId).then(res => {
        this.imgSrc = 'data:image/jpeg;base64,' + res.data.obj
      }).catch(err => {
        alert(err.message())
      })
      this.modal1 = true
    },
    deleteHonor(index) {
      this.selected = index
      getViolationImage(this.data1[index].udvrecordId).then(res => {
        let context = 'data:image/jpeg;base64,' + res.data.obj
        this.downloadFileByBase64(context,'违规记录图片'+this.data1[index].udvrecordId+'.jpg')
        this.$Message.info("下载成功")
      }).catch(err => {
        alert(err.message())
      })
    },
    ok() {

    },
    click() {

    }
  },
  mounted() {
    this.getAllTypes()
  }
}
</script>

<style scoped>

</style>
